// 颜色变量
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;
$warning-color: #ffc107;
$info-color: #17a2b8;
$light-color: #f8f9fa;
$dark-color: #343a40;

// 字体大小变量
$font-size-base: 16px;
$font-size-large: 20px;
$font-size-small: 12px;

// 边距和间距变量
$spacing-base: 16px;
$spacing-large: 24px;
$spacing-small: 8px;


// 按钮样式
.button {
  background-color: $primary-color;
  color: white;
  border: none;
  padding: $spacing-base;
  font-size: $font-size-base;
  border-radius: 4px;
}

// 文本样式
.text {
  font-size: $font-size-base;
  color: $dark-color;
}

// 容器样式
.container {
  padding: $spacing-base;
}

/* 混合：用于清除浮动 */  
@mixin clearfix {  
  &::after {  
    content: "";  
    display: table;  
    clear: both;  
  }  
}  
  
/* 混合：用于设置中心点 */  
@mixin center {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}  
  
/* 混合：用于设置响应式字体大小 */  
@mixin responsive-font($min-size, $max-size) {  
  font-size: $min-size;  
  @media (min-width: 768px) {  
    font-size: calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - 320px) / (768 - 320)));  
  }  
  @media (min-width: 768px) and (max-width: 1024px) {  
    font-size: calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - 768px) / (1024 - 768)));  
  }  
  @media (min-width: 1024px) {  
    font-size: $max-size;  
  }  
}  
  
/* 函数：用于计算rem */  
@function px2rem($px) {  
  $rem: 37.5px; // 假设设计稿宽度为375px  
  @return ($px / $rem) + rem;  
}  
 
